<script lang="ts" setup>
  import { useModalBinder } from '@/hooks/arco/useModalBinder';
  import { getRepairLogs, resolveRepair } from '@/api-new/devices';
  import { Message, Modal } from '@arco-design/web-vue';
  import { useSkeleton } from '@/hooks/arco/useSkeleton';

  const skeleton = useSkeleton({
    apiFun: getRepairLogs,
    immediate: false,
  });

  const binder = useModalBinder((record) => {
    // console.log('record', record);
    binder.setTitle('报损记录');
    skeleton.execute(record.deviceId);
  });

  const unBs = (record: any) => {
    Modal.warning({
      title: '警告',
      content: '确定要解除报损状态，回归正常库吗？',
      okText: '确定',
      cancelText: '取消',
      hideCancel: false,
      onBeforeOk: (done: any) => {
        resolveRepair({ id: record.id })
          .then(() => {
            done(true);
            Message.success('操作成功！');
            skeleton.retry();
          })
          .catch(() => {
            done(false);
          });
      },
    });
  };

  defineExpose(binder.expose);
</script>

<template>
  <a-modal v-bind="binder.bindProps">
    <skeleton-view v-slot="{ data }" v-bind="skeleton.bindProps">
      <ul class="flex flex-col">
        <li
          v-for="(item, index) in data"
          :key="index"
          class="flex items-center justify-between"
        >
          <span>{{ item.repairReason }}</span>
          <span class="text-gray-500">{{ item.submitTime }}</span>

          <a-tag v-if="item.status === 1">未处理</a-tag>
          <a-tag v-else-if="item.status === 2" color="#165dff">处理中</a-tag>
          <a-tag v-else-if="item.status === 3" color="#00b42a">处理完成</a-tag>
          <a-button
            :disabled="item.status !== 1"
            type="text"
            size="small"
            @click="unBs(item)"
            >解除
          </a-button>
        </li>
      </ul>
    </skeleton-view>
  </a-modal>
</template>
